<template>
	<scroll-view @scrolltolower="handleBottom" scroll-y class="content" v-if="albumList.length>0" >
		
	</scroll-view>
</template>

<script>
	import{imgList} from"@/api/cate"
	export default{
		data(){
			return{
				parms:{
					limit:30,
					skip:0,
					order:"new"
				},
				// imgId:"",
				list: [
						{name: '最新'}, 
						{name: '热门'}
				],
				current: 0,
				albumList:[],
				status: 'loading',
				iconType: 'flower',
				hasmore:true,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		props:['imgId'],
		mounted(options) {
			this.loadData()
		},
		methods:{
			loadData(){
				const{limit,skip,order}=this.parms
				imgList('image/v1/vertical/category/'+this.imgId+'/vertical',{limit,skip,order}).then(res=>{
					console.log("imgList",res)
					if(res.res.vertical.length>0){
						this.status="loading"
					}else{
						this.status="nomore"
						this.hasmore=false
					}
					this.albumList=[...this.albumList,...res.res.vertical]
				})
			},
			// 滑动到底部加载更多
			handleBottom(){
				if(this.hasmore){
					this.parms.skip+=this.parms.limit
					this.loadData()
				}
			}
		}
	}
</script>

<style lang="scss">
	.content{
		// 屏幕高度  减去  导航栏高度
		height: calc( 100vh - 32px );
	}
	.album{
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		.item{
			width: 33.33%;
			height: 240rpx;
			image{
				height: 100%;
				width: 100%;
				border: 5rpx solid #fff;
			}
		}
	}
	u-loadmore{
		width: 100%;
		padding: 20rpx 0;
		
	}
</style>
